<template>
  <div class="setting">
    <template v-if="tabType == 'data'">
      <div class="card">
        <div class="title">默认文字</div>
        <div class="content">
          <el-form-item label="提示内容">
            <el-input
              v-model="settingData.data.placeholder"
              placeholder="请输入提示内容"
            ></el-input>
          </el-form-item>
          <el-form-item label="圆角">
            <dc-slider v-model="settingData.data.borderRadius"></dc-slider>
          </el-form-item>
        </div>
      </div>
      <dc-list
        v-model="settingData.data.keywords"
        :leng="3"
        :itemProp="{
          text: '',
          color: '#8C8C8C',
        }"
      >
        <template #title>
          搜索关键字
          <div class="warning">最多可创建三个</div>
        </template>
        <template #listItem="{ element }">
          <el-form-item label="关键字">
            <div class="dc-text-color sa-flex">
              <el-input
                v-model="element.text"
                placeholder="请输入关键字"
                maxlength="4"
                show-word-limit
              ></el-input>
              <div class="color sa-flex">
                <img class="empty" src="/static/images/shop/decorate/picker.png" />
                <el-color-picker v-model="element.color" />
              </div>
            </div>
          </el-form-item>
        </template>
      </dc-list>
    </template>
  </div>
</template>

<script setup>
  import dcColorPicker from '../../common/dc-color-picker.vue';
  import dcList from '../../common/dc-list.vue';
  import dcSlider from '../../common/dc-slider.vue';

  const props = defineProps(['settingData', 'tabType']);
</script>
<style lang="scss" scoped>
  .dc-text-color {
    width: 196px;
    :deep() {
      .el-input {
        flex: 1;
        .el-input__wrapper {
          border-radius: 4px 0 0 4px;
        }
      }
    }
    :deep() {
      .el-color-picker__trigger {
        display: flex;
        padding: 0;
        border-radius: 0 4px 4px 0;
        border-left: none;
        overflow: hidden;
        .el-color-picker__color {
          border: none;
        }
        .el-color-picker__empty {
          display: none;
        }
      }
    }
    .color {
      position: relative;
      .empty {
        width: 32px;
        height: 32px;
        border-radius: 0 4px 4px 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }
</style>
